<!DOCTYPE html>
<html>
<head>
<title>系统日志表</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="../public/css/bootstrap.min.css">
<link rel="stylesheet" href="../public/css/font-awesome.min.css">
<link rel="stylesheet" href="../public/plugins/jqgrid/ui.jqgrid-bootstrap.css"> 
<link rel="stylesheet" href="../public/plugins/ztree/css/metroStyle/metroStyle.css">
<link rel="stylesheet" href="../public/js/elementui/index.css">
<link rel="stylesheet" href="../public/js/toastr/toastr.css">

<link href="../css/main.css" rel="stylesheet">

<script src="../public/libs/jquery.min.js"></script>
<script src="../public/plugins/layer/layer.js"></script>
<script src="../public/libs/bootstrap.min.js"></script>
<script src="../public/libs/vue.min.js"></script>
<script src="../public/js/elementui/index.js"></script>
<script src="../public/plugins/jqgrid/grid.locale-cn.js"></script>
<script src="../public/plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="../public/plugins/ztree/jquery.ztree.all.min.js"></script>
<script src="../public/js/toastr/toastr.min.js"></script>
<script src="../public/plugins/tableExport/libs/FileSaver/FileSaver.min.js"></script>
<script src="../public/plugins/tableExport/libs/js-xlsx/xlsx.core.min.js"></script>
<script src="../public/plugins/tableExport/tableExport.min.js"></script>
<script src="../public/js/common.js"></script>
</head>
<body>
<div id="rrapp" class="conent" v-cloak>
	<div v-show="showList">

		<div class="grid-btn">
			<div class="form-group col-sm-2">
				<input type="text" class="form-control" v-model="q.searchName" @keyup.enter="query"
					   placeholder="用户名/操作">
			</div>
			<a class="btn btn-default" @click="query">查询</a>
			<a v-if="hasPermission('syslog:save')" class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
		</div>


	    <div class="text-left" style="padding: 5px">
            <div style="vertical-align: baseline">
                <div class="col-lg-6  col-md-6 text-left" style="height: 41px;padding-left: 5px;padding-top: 15px;">
                共 <strong>{{page.total}}</strong> 条数据</div>
                <div class="col-lg-6 col-md-6 text-right" style="padding-bottom: 5px;padding-right: 0px">
                    <el-dropdown size="medium" split-button type="default" @click="exportExl" @command="handleCommand">
                        <i class="fa fa-download"></i> 导出数据
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="a">csv</el-dropdown-item>
                            <el-dropdown-item command="b">txt</el-dropdown-item>
                            <el-dropdown-item command="c">Excel</el-dropdown-item>
                            <el-dropdown-item command="d">服务器下载</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <div style="width: 100%">
                <table id="data" class="table table-bordered table-hover">
                    <thead class="thead-default">
                      <tr>
                        <th class="text-center" style="width: 50px">#</th>
                        <th class="text-center" v-for="ols in columnsList">{{ols.name}}</th>
                        <th class="text-center" style="width: 150px">操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item,index) in dataList">
                        <td class="text-center">{{index+1}}</td>
                         <td class="text-center" v-if="columnsList[0].isShow">{{item.username}}</td>
                         <td class="text-center" v-if="columnsList[0].isShow">{{item.operation}}</td>
                         <td class="text-center" v-if="columnsList[0].isShow">{{item.ip}}</td>
                         <td class="text-center" v-if="columnsList[0].isShow">{{stautsMap[item
                         .stauts]}}</td>
                         <td class="text-left" v-if="columnsList[0].isShow">
                         <pre style="overflow: auto;width: 500px; ">{{item.remark}}</pre>
                         
                         </td>
                         <td class="text-center" v-if="columnsList[0].isShow">{{item.createDate}}</td>
                        <td class="text-center">
                            <button class="btn-sm btn-info "
                                      @click="view(item.id)">
                              <i class="fa fa-edit"></i>查看
                            </button>
                        </td>

                      </tr>

                    </tbody>
                </table>
                <div class="text-center" v-show="dataList.length == 0">没有数据</div>
                <div class="text-right" v-show="dataList.length > 0">
                    <el-pagination
                            @size-change="pageChange"
                            @current-change="pageChange"
                            :current-page="page.page"
                            :page-sizes="[30, 50, 100, 200]"
                            :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total">
                    </el-pagination>
                </div>
            </div>

	    </div>
    </div>

    <div v-show="!showList">
      <div class="grid-btn">
        <a v-show="!showView" v-if="hasPermission('syslog:save')" class="btn btn-primary"
           @click="saveOrUpdate"><i class="fa fa-save"></i>&nbsp;保存</a>
        <a v-show="showView" v-if="hasPermission('syslog:update')" class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
        <a v-show="showView" v-if="hasPermission('syslog:delete')" class="btn btn-primary" @click="delOne"><i
        class="fa fa-trash-o"></i>&nbsp;删除</a>
        <a  class="btn btn-warning" @click="reload"><i class="fa fa fa-mail-reply"></i>&nbsp;返回</a>
      </div>
    </div>
    <div v-show="!showList" class="panel panel-vue">
		<div class="panel-heading">{{title}}</div>
		<el-form  class="form-horizontal" :model="sysLog" ref="sysLogForm" :rules="rules">

                    <el-row class="form-group">
                        <el-col :xs="24" :span="6"  class="control-label">
                            <span>时间:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                            <el-form-item prop="createDate">
                                <el-input v-show="!showView" v-model="sysLog.createDate"
                                          auto-complete="off"></el-input>
                                <div v-show="showView"> {{sysLog.createDate}}</div>
                            </el-form-item>

                        </el-col>
                    </el-row>

                      <el-row class="form-group">
                        <el-col :xs="24" :span="6"  class="control-label">
                          <span>用户名:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="username">
                            <el-input v-show="!showView" v-model="sysLog.username"
                            auto-complete="off"></el-input>
                            <div v-show="showView"> {{sysLog.username}}</div>
                          </el-form-item>

                        </el-col>
                      </el-row>

                      <el-row class="form-group">
                        <el-col :xs="24" :span="6"  class="control-label">
                          <span>用户操作:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="operation">
                            <el-input v-show="!showView" v-model="sysLog.operation"
                            auto-complete="off"></el-input>
                            <div v-show="showView"> {{sysLog.operation}}</div>
                          </el-form-item>

                        </el-col>
                      </el-row>

                      <el-row class="form-group"  v-if="false">
                        <el-col :xs="24" :span="6"  class="control-label">
                          <span>请求方法:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="method">
                            <el-input v-show="!showView" v-model="sysLog.method"
                            auto-complete="off"></el-input>
                            <div v-show="showView"> {{sysLog.method}}</div>
                          </el-form-item>

                        </el-col>
                      </el-row>

                      <el-row class="form-group" v-if="false">
                        <el-col :xs="24" :span="6"  class="control-label" style="height: 140px">
                          <span>请求参数:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="params">
                              <el-input
                                      type="textarea"
                                      :rows="6"
                                      v-model="sysLog.params">
                              </el-input>
                          </el-form-item>

                        </el-col>
                      </el-row>

                      <el-row class="form-group">
                        <el-col :xs="24" :span="6"  class="control-label">
                          <span>IP地址:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="ip">
                            <el-input v-show="!showView" v-model="sysLog.ip"
                            auto-complete="off"></el-input>
                            <div v-show="showView"> {{sysLog.ip}}</div>
                          </el-form-item>

                        </el-col>
                      </el-row>

                      <el-row class="form-group">
                        <el-col :xs="24" :span="6"  class="control-label">
                          <span>状态:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="stauts">
                            <el-select v-show="!showView" v-model="sysLog.stauts" placeholder="请选择">
                              <el-option
                                v-for="item in stautsList"
                                :key="item.value"
                                :label="item.text"
                                :value="item.value">
                              </el-option>
                            </el-select>
                            <div v-show="showView">{{stautsMap[sysLog.stauts]}}</div>
                          </el-form-item>
                        </el-col>
                      </el-row>

                      <el-row class="form-group">
                        <el-col :xs="24" :span="6"  class="control-label">
                          <span>修改内容:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="remark">
                            <el-input v-show="!showView" v-model="sysLog.remark"
                            auto-complete="off"></el-input>
                            <div v-show="showView"> {{sysLog.remark}}</div>
                          </el-form-item>

                        </el-col>
                      </el-row>

                      <el-row class="form-group">
                        <el-col :xs="24" :span="6"  class="control-label">
                          <span>消息:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="message">
                            <el-input v-show="!showView" v-model="sysLog.message"
                            auto-complete="off"></el-input>
                            <div v-show="showView"> {{sysLog.message}}</div>
                          </el-form-item>

                        </el-col>
                      </el-row>


		</el-form>
	</div>
    <div v-show="!showList">
      <div class="grid-btn">
        <a v-show="!showView" v-if="hasPermission('syslog:save')" class="btn btn-primary"
           @click="saveOrUpdate"><i class="fa fa-save"></i>&nbsp;保存</a>
        <a v-show="showView" v-if="hasPermission('syslog:update')" class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
        <a v-show="showView" v-if="hasPermission('syslog:delete')" class="btn btn-primary" @click="delOne"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
        <a  class="btn btn-warning" @click="reload"><i class="fa fa fa-mail-reply"></i>&nbsp;返回</a>
      </div>
    </div>
</div>

<script src="../sys/js/sysLog.js"></script>
</body>
</html>
